<template>
  <div class="container">

    <div style="display: flex; align-items: center;">
      <i class="el-icon-check" style="font-size: 4em;margin-right: 12px;font-weight: bold;color: #28ab4d"></i>
      <div style="flex: 1;">
        <div style="display: flex; align-items: center;">
          <p style="font-size: 20px;font-weight: bold">操作成功！</p>
          <el-link
              :href="link"
              @click="handleClick"
              style="color: #28ab4d"
              class="installation-step"
          >
            {{ timerText }}
          </el-link>
        </div>
        <p style="font-size: 16px;margin-top: 8px;margin-left: 0px">反馈成功，您的反馈将会被认真对待！</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始倒计时时间（秒）
      countdown: 3,
      // 链接地址
      link: '/front/feedBack',
      // 显示在链接上的文本
      timerText: '3秒后自动跳转，点击立即跳转'
    }
  },
  created() {
    this.startCountdown();
  },
  methods: {
    // 倒计时方法
    startCountdown() {
      const interval = setInterval(() => {
        this.countdown--;
        // 更新显示文本
        this.timerText = `${this.countdown}秒后自动跳转，点击立即跳转`;
        // 如果倒计时结束，则清除间隔并跳转
        if (this.countdown <= 0) {
          clearInterval(interval);
          window.location.href = this.link;
        }
      }, 1000);
    },
    // 点击链接时执行的方法
    handleClick() {
      window.location.href = this.link;
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 使容器高度为视口高度 */
  width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
  background-color: white
}

.installation-step {
  display: inline-block; /* 使div像span一样只占据必要的宽度 */
  position: relative; /* 为伪元素定位做准备 */
}

.installation-step::after {
  content: ''; /* 伪元素的内容为空 */
  display: block; /* 使其成为一个块级元素 */
  height: 1px; /* 直线的高度 */
  background-color: #28ab4d;
  width: 100%; /* 直线宽度的近似值，这里设置为父元素宽度的80% */
  position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.installation-steps） */
  bottom: -3px; /* 直线距离父元素底部的距离 */
}
</style>
